<template>
<!-- 运营管理借贷分配 -->
    <div>
        <div class="opeCom">
            <h4>借款分配记录</h4>
            <div class="choice">
                <el-form ref="form" :model="form" size="mini">
                    <el-form-item label="">
                       
                            <el-input v-model="form.number" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                            <el-select v-model="form.region1" placeholder="所有分配状态">
                                <el-option label="所有分配状态" value="she"></el-option>
                                <el-option label="待分配" value="he"></el-option>
                                <el-option label="已分配" value="me"></el-option>
                            </el-select>
                         </el-form-item>
                         <el-form-item label="">
                            <el-select v-model="form.region2" placeholder="所有专属客服">
                                <el-option label="所有专属客服" value="she"></el-option>
                                <el-option label="测试" value="he"></el-option>
                                <el-option label="孙鑫" value="me"></el-option>
                                <el-option label="小璐" value="who"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary">确定</el-button>       
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <ul class="authen">
            <li>
                <p>未分配</p>
                <span>2452</span>
            </li>
            <li>
                <p>未分配</p>
                <span>--</span>
            </li>
            <li>
                <p>已处理</p>
                <span>2418</span>
            </li>
            <li>
                <p>未处理</p>
                <span>34</span>
            </li>
        </ul>
          <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="100">
                    </el-table-column>
                    <el-table-column prop="record" label="分配状态">
                    </el-table-column>
                    <el-table-column prop="handel" label="处理状态">
                    </el-table-column>
                    <el-table-column prop="service" label="专属客服">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作">
                        <template slot-scope="scope">
                    <el-button type="text" size="small" @click="exclusive=true">修改专属客服</el-button>
                    <el-dialog title="修改专属客服" :visible.sync="exclusive" width="40%" :before-close="exclusiveClose">
       <m-dialog></m-dialog>
        <span slot="footer" class="dialog-footer">
            <el-button @click="exclusive = false">取 消</el-button>
            <el-button type="primary" @click="exclusive = false">确 定</el-button>
          </span>
    </el-dialog>
    </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="prev,pager,next"
        :total="tableData.length"
        >
        </el-pagination>
    </div>
    </div>
</template>
<script>
import dialog from '../comm/dialog.vue'
    export default {
        data() {
            return {
                pagesize:1,
                currentPage:1,
                exclusive:false,
                form: {
                    region1: '',
                    region2: '',
                    date1: '',
                    date2: ''
                },
                tableData: [{
                        name: '柳芸1',
                        record: '已分配',
                        handel: '已处理：审核拒绝',
                        operate: '陈未新',
                        service:'修改专属客服'
                    },
                    {
                     name: '柳芸2',
                        record: '已分配',
                        handel: '已处理：审核拒绝',
                        operate: '陈未新',
                        service:'修改专属客服'
                    },
                    {
                       name: '柳芸3',
                        record: '已分配',
                        handel: '已处理：审核拒绝',
                        operate: '陈未新',
                        service:'修改专属客服'
                    },
                    {
                        name: '柳芸4',
                        record: '已分配',
                        handel: '已处理：审核拒绝',
                        operate: '陈未新',
                        service:'修改专属客服'
                    }
                ]
            }
        },
        methods:{
            exclusiveClose(done){
                done()
            },
            handleSizeChange(val){
this.pagesize=val;
            },
            handleCurrentChange(val){
this.currentPage=val;
            }
        },
        components:{'m-dialog':dialog}
    }
</script>
<style lang="scss" scoped>
    @import '../../css/topChoice.scss';
   @import '../../css/loan.scss';
</style>
